import Taro, {Component} from '@tarojs/taro'
import { AtCard,AtSwipeAction ,AtList, AtListItem  } from 'taro-ui'
import {View} from "@tarojs/components"
import {showErrorMsg,showModal,navigateWithAuth} from '../../../utils/index'
import {getGlobalData} from "../../../global.d";
import {updateUserClass} from './service'
import './index.scss'

export default class Index extends Component {
  config = {
    navigationBarTitleText:'管理班级'
  }
    constructor(props) {
        super(props);
        this.state = {
            current: 0,
            user:{
              userClass:[]
            }
        }
    }
    componentDidMount() {
    this.setState({
      user:getGlobalData('user')
    })
    }

  handleClick (value) {
    this.setState({
      current: value
    })
  }
  async clickClassItem(index, option) {
    let {user} = this.state
    if (option.text === '退出') {
      if (await showModal('⚠注意', '确认要退出班级吗❓')) {
       let changeLastTimeClass = false
        if(user.userClass[index].classKey === user.userLastTimeClass.classKey)
          changeLastTimeClass = true
        user.userClass.splice(index, 1)
        await updateUserClass(user._id, user.userClass,changeLastTimeClass)
        this.setState({
          user
        })
      }
    }else {
      navigateWithAuth('/pages/my/manageClasses/editClass/index?classKey=' + user.userClass[index].classKey)
    }
  }

    render() {

      const optionForUser = [{
        text: '退出',
        style: {
          backgroundColor: '#FF4949'
        } }]
      const optionForAdmin = [{
        text: '编辑',
        style: {
          backgroundColor: '#6190E8'
        }
      },{
        text: '退出',
        style: {
          backgroundColor: '#FF4949'
        } }
      ]
      const {userClass} = this.state.user
      //我加入的班级
      const userClassList = userClass.map((item, index) => {
        if(item.type==='user')return(
          <AtSwipeAction
            key={index}
            options={optionForUser}
            isOpened={index === 0}
            onClick={this.clickClassItem.bind(this,index)}
            autoClose={true}
          >
            <AtListItem title={item.className} />
          </AtSwipeAction>
        )
      })
      //我加入的班级
      const adminClassList = userClass.map((item, index) => {
        if(item.type==='admin')return(
          <AtSwipeAction
            key={index}
            options={optionForAdmin}
            isOpened={index === 0}
            onClick={this.clickClassItem.bind(this,index)}
            autoClose={true}
          >
            <AtListItem title={item.className} />
          </AtSwipeAction>
        )
      })
        return (
            <View>
              <AtCard
                title='我加入的班级'
              >
                <AtList>
                  {userClassList}
                </AtList>
              </AtCard>

              <AtCard
                title='我管理的班级'
              >
                <AtList>
                  {adminClassList}
                </AtList>
              </AtCard>

            </View>
        )
    }

}
